<template>
  <div>
    <div class="header">
      <h1>备忘录</h1>
      <button @click="showAddModal = true">添加备忘录</button>
    </div>
    <div class="category">
      <div class="category-item" :class="{ active: selectedCategory === 'all' }" @click="selectedCategory = 'all'">
        全部
      </div>
      <div class="category-item" :class="{ active: selectedCategory === 'work' }" @click="selectedCategory = 'work'">
        工作
      </div>
      <div class="category-item" :class="{ active: selectedCategory === 'life' }" @click="selectedCategory = 'life'">
        生活
      </div>
      <div class="category-item" :class="{ active: selectedCategory === 'study' }" @click="selectedCategory = 'study'">
        学习
      </div>
    </div>
    <div class="memo-list">
      <div class="memo-item" v-for="memo in filteredMemos" :key="memo.id" @click="showMemoModal(memo)">
        <div class="memo-title">{{ memo.title }}</div>
        <div class="memo-category">{{ memo.category }}</div>
      </div>
    </div>
    <div v-if="showAddModal" class="modal">
      <div class="modal-content">
        <h2>添加备忘录</h2>
        <div>
          <label for="title">标题：</label>
          <input type="text" id="title" v-model="newMemo.title" />
        </div>
        <div>
          <label for="category">分类：</label>
          <select id="category" v-model="newMemo.category">
            <option value="work">工作</option>
            <option value="life">生活</option>
            <option value="study">学习</option>
          </select>
        </div>
        <div>
          <label for="content">内容：</label>
          <textarea id="content" v-model="newMemo.content"></textarea>
        </div>
        <button @click="addMemo">添加</button>
        <button @click="showAddModal = false">取消</button>
      </div>
    </div>
    <div v-if="showMemo" class="modal">
      <div class="modal-content">
        <h2>{{ selectedMemo.title }}</h2>
        <div class="memo-category">{{ selectedMemo.category }}</div>
        <div>{{ selectedMemo.content }}</div>
        <button @click="deleteMemo(selectedMemo)">删除</button>
        <button @click="showMemo = false">关闭</button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      memos: [
        {
          id: 1,
          title: '工作备忘录1',
          category: 'work',
          content: '这是一条工作备忘录1的内容'
        },
        {
          id: 2,
          title: '生活备忘录1',
          category: 'life',
          content: '这是一条生活备忘录1的内容'
        },
        {
          id: 3,
          title: '学习备忘录1',
          category: 'study',
          content: '这是一条学习备忘录1的内容'
        },
        {
          id: 4,
          title: '工作备忘录2',
          category: 'work',
          content: '这是一条工作备忘录2的内容'
        },
        {
          id: 5,
          title: '生活备忘录2',
          category: 'life',
          content: '这是一条生活备忘录2的内容'
        },
        {
          id: 6,
          title: '学习备忘录2',
          category: 'study',
          content: '这是一条学习备忘录2的内容'
        }
      ],
      newMemo: {
        title: '',
        category: '',
        content: ''
      },
      selectedMemo: {},
      selectedCategory: 'all',
      showAddModal: false,
      showMemo: false
    };
  },
  methods: {
    addMemo() {
      const id = this.memos.length + 1;
      this.memos.push({ ...this.newMemo, id });
      this.newMemo = { title: '', category: '', content: '' };
      this.showAddModal = false;
    },
    deleteMemo(memo) {
      const index = this.memos.findIndex(m => m.id === memo.id);
      this.memos.splice(index, 1);
      this.showMemo = false;
    },
    showMemoModal(memo) {
      this.selectedMemo = memo;
      this.showMemo = true;
    }
  },
  computed: {
    filteredMemos() {
      if (this.selectedCategory === 'all') {
        return this.memos;
      } else {
        return this.memos.filter(m => m.category === this.selectedCategory);
      }
    }
  }
};
</script>
<style>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #f5f5f5;
}
.category {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: #f5f5f5;
}
.category-item {
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}
.category-item.active {
  background-color: #333;
  color: #fff;
}
.memo-list {
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
}
.memo-item {
  width: 45%;
  margin: 10px;
  padding: 10px;
  border-radius: 5px;
  background-color: #f5f5f5;
  cursor: pointer;
}
.memo-item:hover {
  background-color: #eee;
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content {
  position: relative;
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
}
.modal h2 {
  margin-top: 0;
}
.modal input,
.modal select,
.modal textarea {
  margin-bottom: 10px;
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: none;
}
.modal button {
  margin-right: 10px;
  padding: 10px;
  border-radius: 5px;
  border: none;
  background-color: #333;
  color: #fff;
  cursor: pointer;
}
.modal button:hover {
  background-color: #444;
}
</style>